<template>
  <div>
    <router-link to="/city">
      <button>{{this.$store.state.city}}</button>
      </router-link>
    </div>
  <div class="home">
   <router-link class="nav" to="/films/inTheaters">正在热映</router-link>
    <router-link class="nav" to="/films/comingSoon">即将上映</router-link>
  </div>
  <router-view></router-view>
</template>

<script>


export default {
  name: 'Home',
  
}
</script>
<style scoped>
  .home{
    height: 50px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #333;
    line-height: 50px;
  }
 .nav{
    text-decoration: none;
  }
  .router-link-active{
  color: orangered;
  /* border-bottom: 1px solid orangered; */
}
</style>
